<template>
	<div class="goods-list">
	
		<div class="goods-item" v-for="item in goodsList" @click="goDetail(item.id)" >
			<img :src="item.images[0]">
			<h1 class="title">{{ item.name }}</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥1290</span>
					<span class="old">￥1490</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>评分：{{ item.score }}</span>
				</p>
			</div>
		</div>	

	<mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>

	
	
	</div>

</template>

<script>
	//导入MUI的js文件
 	import mui from '../../lib/mui/js/mui.js'	

 	//提示框的js文件
 	import { Toast } from 'mint-ui';

 	import router from 'vue-router'

	export default {
		data(){
			return {
				goodsList:[],
				page:1
			}
		},
		methods:{
			getGoodsList(page){
				//vue-resource的ajax地址不能以“/”开头
				this.$http.get("2/shops?_limit=10&_page="+page).then((result)=>{					
					if(result.body){
						console.log(result.body);
						this.goodsList = this.goodsList.concat(result.body);
						if(result.body.length==0){
							Toast("到底了！")
						}
						
					}else{
						Toast("加载轮播图失败！")
					}
				})
			},		
			getMore(){
				this.page = this.page+1;
				this.getGoodsList(this.page)
			},
			goDetail(id){
				this.$router.push("/home/goodsinfo/"+id);
				// this.$router.push({path:"/home/goodsinfo/"+id});
				// this.$router.push({name:"goodsinfo",params:{id}});
				// this.$router.push({path:"/home/goodsinfo/",query:{id:id}});
			}
		},
		created(){
			this.getGoodsList(this.page)
		},
		mounted(){

		}
	}
</script>

<style lang="scss" scoped>
	.goods-list {
		display: flex;
		justify-content:space-between;
		flex-wrap:wrap;
		padding: 7px;

		.goods-item {
	     	width: 49%;
	     	min-height: 220px;
	     	border: 1px solid #ccc;
	     	box-shadow: 2px 2px 8px #ccc;
	     	margin:3px 0px;
	     	padding: 2px;


	     	display: flex;
	     	flex-direction:column;
	     	justify-content:space-between;
     
	     	img {
	     		width: 100%;
	     		height: 170px;    		
	     	}

	     	.title {
	     		font-size: 14px;
	     		/*word-wrap:normal;*//*默认是：不打断单词的情况下自动换行*/
	     	}
     
	     	.info {
     			background-color: ghostwhite;

	     		p {
	     			padding:4px;
	     			line-height: 15px;
	     			margin: 0px;

	     			&.price {
	     				.now {
	     					color: red;
	     					font-weight: bold;
	     					font-size: 16px;
	     				}
	     				.old {
	     					text-decoration:line-through;
	     				}
	     			}
	     			&.sell {
	     				display: flex;
	     				justify-content:space-between;
	     				font-size: 12px;
	     				color:darkorange;
	     			}


	     		}
	     	}
	     }
	}

</style>